<!-- Author: Edwin -->
<template>
  <div style="height: 100%;">
    <div class='card-line' :style="{ 'opacity': gadgetSetting.hideCard ? 0 : 1}">
      <span>{{ gadgetSetting.fieldsTips }}</span>
      <el-tooltip :open-delay="1000" placement="top">
        <div slot="content"
             class="data-content">
          <!-- <div class="data-line"
               v-for="(value, key) in $store.state.drillThrough.data"
               :key="key">{{ `${key}: ${value}` }}</div> -->
          <!-- <el-input type="textarea"
                    style="color:#ffffff;background:#3f3f3f;"
                    :rows="5"
                    :value="JSON.stringify(this.$store.state.drillThrough.data, null, 4)"></el-input> -->
          <div>{{ JSON.stringify(this.$store.state.drillThrough.data, null, 4) }}</div>
          <div class="copy-row">
            <div class="copy-btn"
                 @click.stop="copyFields()">{{ $t('custom.drillThrough.copyBtn') }}</div>
          </div>
        </div>
        <i class="cuifont icon_help_circle"></i>
      </el-tooltip>
    </div>
    <model :showSetting="queryModelDefaultSetting.showSetting"
           @queryModelClosed="queryModelClosed"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting" />
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'

export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      datesource: {
        value: 'NA'
      },
      gadgetSetting: {},
      loading: false,
      autoRefresh: false,
      // lastSyncTime: null,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: this.gadgetInfo.com,
          gadgetSetting: {
            fieldsTips: 'This is Drill Through Fields',
            hideCard: true
          }
        }
      }
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.setSilcer()
    this.gadgetHeight = (this.gadgetInfo.h * 20) - 20
    this.query()
    this.$store.state.isWidget = false
    // this.autoQuery()
    // this.subscribeMessage('runReport', this.query)
  },
  methods: {
    setSilcer () {
      this._.merge(this.slicer, this.$store.state.drillThrough.data)
      this.slicer = Object.assign({}, this.slicer)
      this.$nextTick(() => {
        this.updateGadgetStatus('ready')
      })
    },
    copyFields () {
      const fields = JSON.stringify(this.$store.state.drillThrough.data)
      const oInput = document.createElement('input')
      document.body.appendChild(oInput)
      oInput.value = fields
      oInput.select()
      document.execCommand('Copy')
      oInput.remove()
      this.$message({
        showClose: true,
        message: 'Copied',
        type: 'success'
      })
    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20) - 20
      this.gadgetWidth = newWPx
    },
    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      var param = {
        ...this.slicer,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        pageId: this.pageId,
        gadgetId: this.id
      }
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        if (res.config) {
          _self.gadgetSetting = Object.assign({}, _self._.merge(_self.gadgetSetting, res.config))
          _self.autoRefresh = _self.gadgetSetting.IsAutoRefresh
          if (_self.autoRefresh) {
            this.computedSyncTimer()
          }
        }
        // if (res.data && res.data.length > 0) {
        //   let tempData = res.data
        //   _self.datesource = tempData[0]
        //   _self.compare()
        // }

        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    computedSyncTimer () {
      this.syncTimer = 0
      clearInterval(this.timers)
      this.timers = setInterval(() => {
        this.syncTimer += 1
      }, 1000)
    },
    compare () {
      var _self = this
      if (_self.gadgetSetting.IsCompare) {
        switch (_self.gadgetSetting.colorCheck) {
          case 1:
            if (Number(_self.datesource.value) > _self.gadgetSetting.maximum) {
              _self.gadgetSetting.valueFontColor = _self.gadgetSetting.oneColor
            }
            break
          case 2:
            if (Number(_self.datesource.value) < _self.gadgetSetting.maximum) {
              _self.gadgetSetting.valueFontColor = _self.gadgetSetting.twoColor
            }
            break
          case 3:
            if (Number(_self.datesource.value) <= _self.gadgetSetting.maximum) {
              _self.gadgetSetting.valueFontColor = _self.gadgetSetting.threeColor
            }
            break
          case 4:
            if (Number(_self.datesource.value) >= _self.gadgetSetting.maximum) {
              _self.gadgetSetting.valueFontColor = _self.gadgetSetting.fourColor
            }
            break
          case 5:
            if (Number(_self.datesource.value) === _self.gadgetSetting.maximum) {
              _self.gadgetSetting.valueFontColor = _self.gadgetSetting.fiveColor
            }
            break
          case 6:
            if (Number(_self.datesource.value) > _self.gadgetSetting.minmum && Number(_self.datesource.value) < _self.gadgetSetting.maximum) {
              _self.gadgetSetting.valueFontColor = _self.gadgetSetting.middleColor
            }
            if (Number(_self.datesource.value) > _self.gadgetSetting.minmum && Number(_self.datesource.value) > _self.gadgetSetting.maximum) {
              _self.gadgetSetting.valueFontColor = _self.gadgetSetting.maxColor
            }
            if (Number(_self.datesource.value) < _self.gadgetSetting.minmum && Number(_self.datesource.value) < _self.gadgetSetting.maximum) {
              _self.gadgetSetting.valueFontColor = _self.gadgetSetting.minColor
            }
            break
          default:
            break
        }
      }
    },
    autoQuery () {
      this.refreshQurey()
    },
    refreshQurey () {
      var _self = this
      var param = {
        ...this.slicer,
        pageId: this.pageId,
        gadgetId: this.id
      }
      _self.autoRefresh = _self.gadgetSetting.IsAutoRefresh
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        if (res.data && res.data.length > 0) {
          let tempData = res.data
          _self.datesource = tempData[0]
          _self.compare()
        }
        this.computedSyncTimer()
      })
    }
  }
})
</script>

<style scoped lang='scss'>
.card-line {
  width: 100%;
  border: 1px solid #efefef;
  background: #fbfbfb;
  padding: 9px 15px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;

  i {
    color: #e6a23c;
    font-size: 1.2em;
  }
}

.data-content {
  overflow: auto;
}

.copy-row {
  display: flex;
  justify-content: flex-end;
}

.copy-btn {
  padding: 3px 6px;
  border: 1px solid #6f6f6f;
  background: #6f6f6f;
  border-radius: 3px;
  color: #ffffff;
  display: inline-block;
  cursor: pointer;

  &:hover {
    background: #9f9f9f;
  }
}
.data-line {
  line-height: 1.5em;
  height: 1.5em;
}
</style>
